<template>
	<div class="page">
		<el-dialog
		v-model="moveDialog"
		title="移动文档到"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		width="400"
		>
		<el-cascader
		 v-model="moveToNode"
		 :options="dataList"
		 :props="{value: 'id', label: 'title',checkStrictly: true,emitPath: false}"
		 :show-all-levels="false"
		 clearable
		>
		</el-cascader>
		<el-button @click="moveHandler">确定</el-button>
		</el-dialog>
		<div class="page-title">
			<span>{{doc.title}}</span>
			<div class="page-btn">
				<el-button @click="handlerMove">移动</el-button>
				<el-button @click="handlerEdit">编辑</el-button>
				<el-popconfirm
					confirm-button-text="确定"
					confirm-button-type="danger"
				    cancel-button-text="取消"
				    icon="WarningFilled"
				    icon-color="#f56c6c"
				    title="确定删除文档?"
					@confirm="handlerRemove"
				>
					<template #reference>
				      <el-button type="danger">删除</el-button>
				    </template>
				</el-popconfirm>
			</div>
		</div>
		<div class="page-info">创建时间：{{dateFormat(doc.addTime)}}</div>
		<el-divider></el-divider>
		<div class="doc-content">
			<editor
			ref="editorRef"
			v-model="doc.content"
			:defaultConfig="editConfig"
			@onCreated="handlerCreate"
			mode="default"
			></editor>
		</div>
	</div>
</template>

<script>
import { Editor } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { docList,getDoc, removeDoc, modifyDoc } from '@/api/doc'
import { dateFormat } from '@/utils/util'
import { ElMessage } from 'element-plus'
import { listToTree } from '@/utils/util'
export default {
	name: 'Page',
	components: {
		Editor
	},
	data() {
		return {
			moveDialog: false,
			dataList: [],
			moveToNode:0,
			doc: {
				id: this.$route.query.id,
				title: '',
				content: ''
			},
			id: this.$route.query.id,
			editConfig: {
				scroll: true,
				readOnly: true,
				autoFocus: false
			}
		}
	},
	methods: {
		moveHandler:function(){
			modifyDoc({
				id: this.doc.id,
				parentId: this.moveToNode,
				saveType: 1
			}).then(res => {
				if(res.code === 0){
					this.$emit('refushMenu')
					ElMessage.success(res.msg)
					this.moveDialog = false
				}else{
					ElMessage.error(res.msg)
				}
			})
		},
		handlerCreate: function(editor){
			this.editor = editor
		},
		handlerEdit: function(){
			console.log(this.doc)
			this.$router.push({
				path: '/edit',
				query: {
					id: this.doc.id
				}
			})
		},
		handlerRemove: function(){
			removeDoc({
				id: this.doc.id
			}).then(ret => {
				this.$emit('refushMenu')
				this.$router.push('/')
			})
		},
		getDoc: function(){
			getDoc({id: this.doc.id})
			.then((res) => {
				this.doc = res.data
			})
		},
		dateFormat:function(timestamp){
			return dateFormat(timestamp)
		},
		handlerMove: function(){
			this.loadDocList()
			this.moveDialog = true
		},
		loadDocList: function(){
			docList({spaceId: this.doc.spaceId})
			.then((res) => {
				this.dataList = listToTree(res.data)
			})
		}
	},
	watch: {
		'$route': function(){
			this.doc.id=this.$route.query.id
			this.id = this.$route.query.id
		},
		'id': function(val){
			if(val){
				this.getDoc()
			}
		}
	},
	mounted() {
		this.doc.id=this.$route.query.id
		this.getDoc()
		this.$emit('updatePageStatus',false)
	}
}
</script>

<style scoped>
.page{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	font-size: 16px;
}
.page-title{
	height: 32px;
	font-weight: bold;
	font-size: 18px;
	display: flex;
	justify-content: space-between;
}
.page-info{
	height: 20px;
	font-size: 14px;
	color: #CCCCCC;
}
.doc-content{
	height: calc(100vh - 242px);
	position: relative;
}
.table-container{
	border: 0px;
}
</style>